Implement useLocalStorage hook.

Imagine you need a simple form that remembers the user's name between page reloads. How would you use a useLocalStorage hook to achieve that?

If you call your hook with a key that doesn't exist yet in localStorage, what value should it return and why?

You're adding a dark‑mode toggle that should persist across sessions. Walk me through how you'd integrate a useLocalStorage hook, and what you would do if the stored value becomes corrupted JSON.

During testing you notice the component re‑renders twice on mount when using the hook. What could be causing that and how would you fix it?

Our app runs in multiple browser tabs and we need the theme preference to stay consistent. How would you extend the useLocalStorage hook to listen for changes from other tabs without causing performance issues?

We have a feature flag stored in localStorage that many components read. Discuss how you would avoid stale reads and ensure updates propagate efficiently.

The team wants to replace localStorage with a centralized user‑settings service while keeping the existing hook API. How would you design the abstraction to support both storage mechanisms and minimize impact on downstream components?

Considering security and GDPR, what architectural concerns arise from persisting user data in localStorage, and how would you mitigate them at a system level?